
<template>
	<view class="root">
		<view class="top-bar">
			<image src="../../static/art.png" mode="" class="bg"></image>
		</view>
		<view class="introduce">
			<view class="title">
				<text>贵州中艺书画培训学校</text>
			</view>
			<view class="content">
				<text>贵州中艺书画培训学校---创办于2006年。是由教育部门颁发《办学许可证》的正规艺术培训学校。是贵州省最专业的书画艺术教育机构之一，被国家列为“全国书画考级培训基地”、“青少年文学联合理事单位”、“艺术联盟理事会员单位”。并获得“中国百佳美育名校”称号。</text>
			</view>
		</view>
		
		<view class="tab-bar">
			<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#c6100e" height="80" bg-color="#f8f8f8" @change="change"></u-tabs>
		</view>
		
		<view class="c1-list">
			<view class="list">
				 <view>
				  <image src="../../static/007.jpg" mode="" class="img"></image>
				 </view>
				 <view class="titles">
				 	<text>书画课程</text>
				 </view>
				 <view class="contents">
				 	<text>一对一 固定时段</text>
				 </view>
			</view>
			<view class="list">
				 <view>
				 <image src="../../static/007.jpg" mode="" class="img"></image>
				 </view>
				 <view class="titles">
				 	<text>国画课程</text>
				 </view>
				 <view class="contents">
				 	<text>一对一 固定时段</text>
				 </view>
			</view>
		</view>
		<view class="c1-list">
			<view class="list">
				 <view>
				 <image src="../../static/007.jpg" mode="" class="img"></image>
				 </view>
				 <view class="title" >
				 	<text>高考美术课程</text>
				 </view>
				 <view class="content">
				 	<text>一对一 固定时段</text>
				 </view>
			</view>
			<view class="list">
				 <view>
				 	 <image src="../../static/007.jpg" mode="" class="img"></image>
				 </view>
				 <view class="title" style="margin-left: 15rpx;">
				 	<text>卡通漫画兴趣课程</text>
				 </view>
				 <view class="content" style="margin-left: 15rpx;">
				 	<text>一对一 固定时段</text>
				 </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				list: [
					{
					name: '全部课程'
				  }, 
					{
					name: '书法',
				  },
					{
					name: '国画',
					}
				],
				current: 0
			}
		},
		methods:{
			change(index) {
			  this.current = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top-bar .bg{
		width: 100%;
		height: 330rpx;
	}
	
	.title{
		font-size: 30rpx;
		font-weight: 700;
		margin-left: 40rpx;
	}
	
	.content{
		width: 90%;
		margin-left: 5%;
		margin-top: 16rpx;
	  color: #949494;
		font-size: 26rpx;
		line-height: 42rpx;
		text-align: justify;
	}
	
	.c1-list {
		display: flex;
		justify-content: space-between;
		width: 90%;
	} 
	
	.c1-list .list  {
		width: 346rpx;
		height: 486rpx;
		border-radius: 0 0 10rpx 10rpx;
		background-color: #fefffe;
		margin-left: 3%;
		margin-top: 20rpx;
	}
	
  .img{
		width: 346rpx;
		height: 346rpx;
		border-radius: 10rpx 10rpx 0 0;
		}
		
	.titles{
		text-align: left;
		font-size: 16px;
		font-weight: 700;
		margin-left: 10px;
	}
	
	.contents{
		text-align: left;
		font-size: 14px;
		margin-left: 10px;
		color: #949494;
	}
</style>
